<template>
    <div id="EnrollManage">
        <searchView :baseURL="baseURL" @searchResult="searchResult"></searchView>
        <el-button @click="showDistributionView()" type="primary" style="margin-bottom:20px">批量分配咨询师</el-button>
        <table class="table  table-bordered">
            <tbody>
                <tr class="tableHeader">
                    <td>
                      <el-checkbox  v-model="checkAll" @change="selectAll">全选</el-checkbox>                            
                    </td>
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>上门时间</td>
                    <td>咨询师</td>
                    <td>状态</td>
                    <td>试学</td>
                    <td>报名</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,key) in dataSource" :key="key" class="tableRow">
                    <td>
                        <input type="checkbox" v-model="selectStudents" :value="item">
                    </td>
                    <td>{{item.sname}}</td>
                    <td>{{item.mobile}}</td>
                    <td>{{item.arriveTime}}</td>
                    <td>{{item.advisor}}</td>
                    <td>{{item.status|showStatus}}</td>
                    <td>{{item.isTry?"是":"否"}}</td>
                    <td>{{item.isPay?"是":"否"}}</td>
                    <td>
                        <el-button size="mini" type="success" plain @click="showDistributionAdivisorView=true,selectStudents=[item]">
                            分配
                        </el-button>
                         <el-button
                        size="mini"
                        @click="follow(key, item)"  type="danger" plain>
                        跟踪</el-button>
                       
                    </td>
                </tr>
            </tbody>
        </table>
            <el-pagination
            background
            layout="prev, pager, next"
            :total="totalRecord"
            @current-change="currentChange">
        </el-pagination>
        <el-dialog
        title="分配咨询师"
        :visible.sync="showDistributionAdivisorView"
        width="30%"
        >
        <el-select style="margin-left:80px;" v-model="advisor" @click.native="loadAllAdvisor">
            <el-option v-for="(item,key) in allAdvisor"
            :key = key
            :label = item.realName
            :value = item.realName
            ></el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showDistributionAdivisorView = false">取 消</el-button>
            <el-button type="primary" @click="showDistributionAdivisorView = false,distributionAdivisor()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
import searchView from './searchView'
export default {
    data(){
        return {
            totalRecord: 0,
            baseURL: window.baseURL+"/backstage/social/findByPage?signal=4&token="+this.$token+"&",
            tempDataSource: [],
            totalPage: 0,
            arriveTime: '',
            advisor: '',
            allAdvisor: [],
            dataSource: [],
            checkAll: false, //是否全选
            selectStudents:[], //存储选中的学生信息
            results: [],
            showDistributionAdivisorView: false
        }
    },
    components: {searchView},
    methods: {
        loadData(pageNo){
            var socialURL = window.baseURL+"/backstage/social/findDisableByPage?token="+this.$token+"&pageSize=10&pageNum="+pageNo+"&signal=4";
            this.$http.get(socialURL)
            .then((response)=>{
                this.dataSource = response.data.data.list.results;
                this.results = response.data.data.list.results;
                this.tempDataSource = this.dataSource;
                this.totalPage = response.data.data.list.totalPage;
                this.totalRecord = response.data.data.list.totalRecord;
            })
            .catch((error)=>{
            })
        },
         currentChange(value){
            this.loadData(value);
        },
        follow(index,visitor){
            localStorage.setItem("currentVisitor",JSON.stringify(visitor));
            this.$router.push({name:'FollowInvalidVisitor',params:{currentVisitor:visitor}})
        },
        searchResult(dataSource){
            this.dataSource = dataSource;
        },
        //显示分配咨询师弹框
        // 如果学生列表为空,则弹出列表不能为空的选线
        showDistributionView(){
            if(this.selectStudents.length){
                this.showDistributionAdivisorView =true;
            }else{
                this.showDistributionAdivisorView =false;
                this.$alert('请选择需要转班的学生', '', {
                confirmButtonText: '确定',
                });
            }
        },
        //分配咨询师
        distributionAdivisor(){
            var socialIds = '';
            this.selectStudents.forEach((item)=>{
                socialIds += item.id+',';
            })
            socialIds = socialIds.slice(0,socialIds.length-1);
            var url = window.baseURL + '/backstage/social/divide';
            var action = ()=>{
                this.$http.post(url,this.$qs.stringify({socialIds:socialIds,advisor:this.advisor,token:this.$token}))
                .then((response)=>{
                    if(response.data.success){
                        this.$message({
                            message: response.data.message,
                            type: 'success'
                        });
                        this.selectStudents = [];
                        this.loadData(1);
                    }
                })
                .catch((error)=>{
                })
            }
            this.operatorConfirm(action,'转咨询师');
        },
        selectAll(){
           if(this.checkAll){
               this.selectStudents = this.results;
           }else{
               this.selectStudents = [];
           }
        },
        loadAllAdvisor(){
            // /backstage/account/findAllAdvisor
            var campusId = JSON.parse(localStorage.getItem('responseData')).account.campusId;
            var allAdvisorURL = window.baseURL + "/backstage/account/findAllAdvisor?token="+this.$token+"&campusId="+campusId;
            this.$http.get(allAdvisorURL)
            .then((response)=>{
                this.allAdvisor = response.data.data;
            })
        }
    },
    filters: {
        showStatus(value){
            var status = ["2天之内关单","1周内关单","长期跟单","无效量"]
            return status[value-1];
        }
    },
    watch: {
        dataSource(newValue){
        },
        selectStudents(newValue){
           //如果当前页全选,选择完成之后,添加到班级里,然后状态发生变化,重新发起请求,获取剩下的数据
           if(this.selectStudents.length==this.results.length){
               this.checkAll = true;
           }else{
               this.checkAll = false;
           }
        }
    },
    created(){
        this.loadData(1);
    }
}
</script>
<style lang="scss" scoped>
    #EnrollManage{
        width: 100%;
        height: 100%;
        padding: 50px;
        position: absolute;   
    }
</style>

